<template>
    <div id="commoditypage">
        <van-nav-bar title="商品详情" left-arrow @click-left="onClickLeft" />
        <div class="goods">
            <van-swipe class="goods-swipe" indicator-color="#ff5733">
                <van-swipe-item v-for="thumb in thumb" :key="thumb" >
                    <img :src="thumb" >
                </van-swipe-item>
            </van-swipe>
            <p class="intro">New Balance NB 2019 新款运动鞋</p>
            <strong class="price">￥999</strong>
        </div>
        <div class="choose">
            <van-button type="primary" @click="showPopup">
                选择规格
            </van-button>
            <van-popup v-model="show" round position="bottom">
                <div class="specification">
                    <van-card price="2.00" desc="描述信息" title="商品标题"  thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"/>
                    <div class="color">颜色</div>
                    <div class="color1">
                        <van-button plain round type="primary" size="mini" v-for="(col,index) in color" :key="index">{{col}}</van-button>
                    </div>
                    <div class="size">尺码</div>
                    <div class="size1">
                        <van-button plain round type="primary" size="mini" v-for="(s,index) in size" :key="index">{{s}}</van-button>
                    </div>
                    <div class="num">数量</div>
                    <div class="num1">
                        <van-stepper v-model="value" />
                    </div>
                    <van-button class="btn" type="primary" round size="normal" @click="btnClick">确定</van-button>
                </div>
            </van-popup>
        </div>
        <van-divider>商品介绍</van-divider>
        <div class="introduce">
            <img v-for="img in imageList" :src="img" :key="img"/>
        </div>
        <div class="bottom">
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon"/>
                <van-goods-action-button type="warning" text="加入购物车" @click="onClickButton1"/>
                <van-goods-action-button type="danger" text="立即购买" @click="onClickButton2"/>
            </van-goods-action>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            show: false,
            imageList: [
                "https://img.alicdn.com/imgextra/i4/520557274/O1CN01y8g2lw23bXWfouqPA-520557274.jpg",
                "https://img.alicdn.com/imgextra/i3/520557274/O1CN01AY053r23bXWfoudxQ-520557274.jpg",
                "https://img.alicdn.com/imgextra/i3/520557274/O1CN011RM0t123bXWdvLAgh-520557274.jpg",
            ],
            thumb: [
                '../../../static/img/goodsdemo.jpg',
                'https://img.alicdn.com/imgextra/i4/520557274/O1CN01y8g2lw23bXWfouqPA-520557274.jpg',
                'https://img.alicdn.com/imgextra/i3/520557274/O1CN01AY053r23bXWfoudxQ-520557274.jpg'
            ],
            goodsid:1,
            goodsprice:'￥360',
            originalprice:'￥480',
            goodsdes:'2019新款',
            tle:'New Balance',
            goodsnum:1,
            goodsimg:'goodsdemo.jpg',
            color:['白色','黑色','灰色'],
            size:[37,38,39,40,41,42,43,44,45],
            value: 1
        }
    },
    methods:{
        showPopup() {
            this.show = true;
        },
        onClickLeft(){
            // this.$router.push({ path: 'home' })
            this.$router.go(-1);
        },
        onClickIcon() {
            this.$router.push({ path: 'contact' })
        },
        onClickButton1() {
            this.$toast.success('成功加入购物车');
        },
        onClickButton2() {
            this.$router.push({ path: 'paying' })
        },
        btnClick(){
           this.$router.go(0)
        }
    }
}
</script>

<style scoped  lang="">
/* 顶部 */
.van-nav-bar .van-icon {
    color:white;
}
.van-nav-bar{
    background-color:#ff5733;
}
.van-nav-bar__title{
    color:white;
}
/* 商品图片 */
.van-swipe-item img{
    width:100%;
    height:8rem;
}
/* 商品信息 */
.price{
    width: 100%;
    font-size: .6rem;
    color:#ff5733;
    text-align: left;
    line-height:0.7rem;
    margin-left: .8rem;
}
.intro{
    width:90%;
    font-size: 0.6rem;
    line-height:0.7rem;
    display:block;
    margin:0.2rem 0.8rem;
}
/* 商品介绍 */
.van-divider{
    font-size:0.5rem;
    color:#000;
}
.introduce img{
    width:100%;
    height:8rem;
    padding:0.3rem 0;
}
/* 商品规格 */
.choose .van-button{
    background-color:white;
    color:#000;
    font-size:0.5rem;
    padding-left:0.8rem;
    width:100%;
    text-align:left;
    border-top:#eaf5f3 .026667rem solid;
    border-bottom:#eaf5f3 .026667rem solid;
    border-left:none;
    border-right:none;
}
.choose .van-popup{
    height:70%;
}
.specification .van-card{
    margin:.266667rem;
}
.specification .van-button{
    color:#000;
    border:none;
    width:1rem;
    background-color:#e7f4de;
    font-size:0.4rem;
    text-align: center;
    margin:0.1rem;
    padding:0;
}
.specification .color,.size,.num{
    margin:0.3rem 1rem;
    font-size:0.5rem;
}
.specification .color1,.size1{
    margin:0 1rem 0.5rem 1rem;
    display:flex;
    flex-wrap:wrap;
    justify-content:start;
}
.specification .num1{
    margin:0.5rem 1rem;
}
.specification .btn{
    width:40%;
    display:block;
    margin:0.5rem auto;
    border:none;
    color:white;
    font-size:0.5rem;
    background-color:#ff5733;
}
</style>
